<!--奖励情况表单-->
<template>
  <div class="form">
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="label required">奖励名称</span>
        <xf-input
          slot="right"
          :valid="[{required: true, msg: '请输入奖励名称'}]"
          v-model="form.name"
          ref="name"
          placeholder="请输入奖励名称"></xf-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">奖励批准日期</span>
        <xf-date-picker
          :valid="[{required: true, msg: '请选择奖励批准日期'}]"
          v-model="form.name"
          placeholder="请选择奖励批准日期"
          slot="right"></xf-date-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">奖励批准单位</span>
        <xf-input
          slot="right"
          :valid="[{required: true, msg: '请输入奖励批准单位'}]"
          v-model="form.name"
          ref="name"
          placeholder="请输入奖励批准单位"></xf-input>
      </yd-cell-item>
    </yd-cell-group>
    <div class="right-bottom">
      <mt-button type="default" size="small" @click="cancel">取消</mt-button>
      <mt-button type="primary" size="small" @click="onSubmit">保存</mt-button>
    </div>
  </div>
</template>
<script>
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'

  export default {
    components: {
      XfInput,
      XfDatePicker,
      XfPicker},
    name: 'form-award',
    data() {
      return {
        form: {
          name: ''
        }
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      onSubmit() {
        this.$emit('save')
      }
    }
  }
</script>
